<template>
  <div class="yl-container">

    <div class="yl-main">
      <!-- 搜索模块 -->
      <div class="yl-search-list">
        <el-form :model="searchConfig" ref="searchConfig" :inline="true">
          <el-form-item label="类型">
            <el-select v-model="searchConfig.kind" placeholder="请选择类型" size="small">
              <el-option
                v-for="(item, index) in kinds"
                :key="index"
                :value="item.value"
                :label="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input  v-model="searchConfig.name" placeholder="请输入项目名称" size="small"></el-input>
          </el-form-item>
          <el-form-item>
             <YlButton uiType="default" icon="el-icon-search" @click="initData(false)">搜 索</YlButton>
            <YlButton uiType="default" btnType="success" icon="iconfont yl-ecs-zhongzhi yl-icon" @click="initTable(false)">重 置</YlButton>
          </el-form-item>
        </el-form>
      </div>
      <br>

      <!-- table 列表组 -->
      <div class="yl-table-list">
        <el-table
          v-loading="loading"
          element-loading-text="玩命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          border
          max-height="700"
          :data="tableData"
        >
          <el-table-column align="center" label="序号">
             <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="类型"  prop="nns_real_category_name">
            <template slot-scope="{row}">
              <span>{{ row.nns_kind | formatKind }}</span>
            </template>
          </el-table-column>

          <el-table-column label="项目编号" prop="nns_code" ></el-table-column>

          <el-table-column label="项目名称" prop="nns_name" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="预算金额(元)" >
            <template slot-scope="{row}">
              <span>{{ row.nns_money | formatMoney('yuan') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="发生金额(元)">
            <template slot-scope="{row}">
              <span>{{ row.nns_amount_money | formatMoney('yuan') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="预算余额(元)">
            <template slot-scope="{row}">
              <span>{{  (row.nns_money - row.nns_amount_money) | formatMoney('yuan') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="实际发生金额(元)">
             <template slot-scope="{row}">
              <span>{{ row.nns_actual_amount_money | formatMoney('yuan') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="实际预算余额(元)">
             <template slot-scope="{row}">
              <span>{{ (row.nns_money - row.nns_actual_amount_money) | formatMoney('yuan') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center"  label="操作" fixed="right">
            <template slot-scope="scope">
              <YlButton uiType="main" icon="el-icon-view" @click="goAddCategory(scope.row.nns_id)">查看</YlButton>
            </template>
          </el-table-column>

          <div class="yl-table-empty" slot="empty">
            <img src="~@/assets/icons/svg/no-data.svg">
            <div>暂无数据</div>
          </div>
        </el-table>
      </div>
    </div>
    <!-- 分页模块 -->
    <YlPage
      :size="size"
      :page="page"
      :total="total"
      @page-size="handlePageSize"
      @current-page="handleCurrentPage"
    />
  </div>
</template>

<script>

import {
  initSelectValue
} from '@/middleware'
export default {
  data () {
    return {
      // 类型数组
      kinds: [
        {
          value: '1',
          key: '行政'
        },
        {
          value: '2',
          key: '教学'
        },
        {
          value: '3',
          key: '全部'
        }
      ],
      categoryList: [],
      canWrite: false,
      loading: false,
      // table 列表数据
      tableData: [],
      searchConfig: {
        kind: '3',
        name: ''
      },
      // 分页
      page: 1,
      size: 10,
      total: 0,
      // query信息
      query: {}
    }
  },
  created () {
    this.query = this.$route.query
    this.initTable()
  },
  methods: {
    // 列表初始化
    initTable (isForce = false) {
      this.loading = true
      this.dialogVisible = false
      this.searchConfig = this.initForm(this.searchConfig)
      this.initDepartment()
      this.initData(isForce)
    },

    async initDepartment () {
      let data = await this.$ylapi.getDepartList()
      data = initSelectValue(data)
      this.departments = data
    },

    // 数据初始化
    async initData (isForce = false) {
      let data = await this.$ylapi.getProjectContentListExecuteStageStandingBook({
        'stage_id': this.query.id,
        page: this.page,
        size: this.size,
        ...this.searchConfig
      })
      this.page = data.page
      this.total = data.total
      this.tableData = data.list
      this.loading = false
    },

    // 跳转
    goAddCategory (id) {
      this.$router.push({
        path: `/executeStage/standingBookManage/ShowProjectContentInfo`,
        query: {
          id: id,
          stage_id: this.query.id
        }
      })
    },
    // 分页---页容量选择器
    handlePageSize (val) {
      this.size = val
      this.loading = true
      this.initData()
    },
    // 分页
    handleCurrentPage (val) {
      console.log(val)
      this.page = val
      this.loading = true
      this.initData()
    },
    // 初始化
    getInitState (val) {
      if (val) {
        this.initTable(true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
